<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="libs/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
    <script src="js/login.js"></script>
    <script>
        $(function() {
            //实现数据总数统计
            get_dataAll()

            //文章日新增折线图表数据获取
            day_articlet();

            //获取文章分类饼状图的服务器的数据
            get_pie_show()

            //获取日新增文章数量统计柱状图
            get_column_show()
        });

        //数据总数统计
        function get_dataAll() {

            myAjax('get', '/admin/data/info', null, function(resData) {
                /*data格式：
                {
                    "totalArticle": 223, 文章总数
                    "dayArticle": 18, 日新增文章数
                    "totalComment": 7999, 总评论数
                    "dayComment": 36 日新增评论数
                }
            */
                // console.log(resData);
                // let data = resData.data
                // 将数据一一赋值给页面对应的元素
                $('.a_count').html(resData.totalArticle)
                $('.b_count').html(resData.dayArticle)
                $('.c_count').html(resData.totalComment)
                $('.d_count').html(resData.dayComment)
            })
        }

        //文章日新增图表数据获取
        function day_articlet() {
            myAjax('get', '/admin/data/article', null, function(resData) {
                /* resData数据格式：
                {
                    date:[
                        {
                            "date": "2019-05-20",
                            "count": 23
                        }
                    ]
                }
                */
                // console.log(resData.date);
                //遍历响应回来的数据,追加到新数组中
                /* resData.date.forEach(item=>{
                    xArrData.push(item.date);
                    Datas.push(item.count);
                }) */
                let datas = resData.date.map(item => item.date);

                let datacount = resData.date.map(item => item.count);
                //调用折线图
                line_chart(datas, datacount)
            })
        }
        //折线图
        function line_chart(datas, datacount) {
            // 1.0初始化echarts实例
            let myChart = echarts.init(document.getElementById('curve_show'));

            //2.0定义图表对应参数 此处是折线图的的配置
            let option = {
                //设置图标标题
                title: {
                    text: '文章日新增趋势',
                    left: 'center',
                },

                //图表X抽数据
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: datas //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },

                //图表Y轴数据 Y轴的设置,固定写成type: 'value'
                yAxis: {
                    type: 'value'
                },

                //鼠标移动到轴上出现提示面板
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },

                //图表的类型和数据
                series: [{
                    data: datacount, //[820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line', // 表示一个折线类型
                    smooth: true, //将折线拐点变为圆角
                    //设置折线的每一个数据显示
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    //颜色渐变
                    // itemStyle: {
                    //     color: new echarts.graphic.LinearGradient(
                    //         0, 0, 0, 1,
                    //         [
                    //             { offset: 0, color: 'red' },                             
                    //             { offset: 1, color: 'blue' }
                    //         ]
                    //     )
                    // },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#fff' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }],
            }

            //3.0 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        //获取文章分类饼状图的服务器的数据
        function get_pie_show() {
            myAjax('get', '/admin/data/category', null, function(resData) {
                /* {
                "code": 200,
                "msg": "获取成功",
                "date": [
                    {
                        "name": "爱旅行",
                        "articles": 41
                    },
                    {
                        "name": "爱生活",
                        "articles": 72
                    },
                    {
                        "name": "爱美食",
                        "articles": 36
                    },
                    {
                        "name": "爱运动",
                        "articles": 47
                    },
                    {
                        "name": "经济特区",
                        "articles": 33
                    }
                ]
                } */

                //将resData中的数据加工处理成饼状图要求的数据格式 使用map方法将服务器响应回来的{}进行遍历
                let date = resData.date;
                let names = date.map(item => item.name);
                let datas = date.map(item => ({
                    name: item.name,
                    value: item.articles,
                }));

                //调用饼图
                pie_show(names, datas)
            })
        }

        //饼图
        function pie_show(names, datas) {
            // 1.0初始化echarts实例
            let myChart = echarts.init(document.getElementById('pie_show'));

            //2.0配置饼图数据
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    left: 10,
                    data: names //['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: false,
                    data: datas
                        /* data: [{
                            value: 335,
                            name: '直接访问'
                        }, {
                            value: 310,
                            name: '邮件营销'
                        }, {
                            value: 234,
                            name: '联盟广告'
                        }, {
                            value: 135,
                            name: '视频广告'
                        }, {
                            value: 1548,
                            name: '搜索引擎'
                        }] */
                }]
            };


            //3.0 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        //日新增文章数量统计柱状图
        function get_column_show() {
            myAjax('get', '/admin/data/visit', null, function(resData) {
                /* {
                    "code": 200,
                    "msg": "日访问量统计数据获取成功",
                    "data": {
                        "2019-05-28": 13016,
                        "2019-05-27": 11503,
                        "2019-05-26": 9128,
                        "2019-05-25": 13155,
                        "2019-05-24": 12734,
                        "2019-05-23": 10714,
                        "2019-05-22": 16282
                    }
                } */
                let data = resData.data;
                let datas = [];
                let nums = [];
                for (let key in data) {
                    datas.push(key); //将data对象中的key对应的属性名保存到datas数组中
                    nums.push(data[key]) // 将data对象中的当前key对应的属性值保存到nums数组中
                };


                //调用柱状图
                column_show(datas, nums)
            })

        }
        //柱状图
        function column_show(datas, nums) {
            // 1.0初始化echarts实例
            let myChart = echarts.init(document.getElementById('column_show'));

            //2.0配置柱状图数据
            let option = {
                xAxis: {
                    type: 'category',
                    data: datas //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: nums, //[120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    barWidth: 30, //设置每根柱子的宽度
                    itemStyle: {
                        color: "rgba(21, 196, 222, 1)"
                    },
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };

            //3.0 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em class="a_count">10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em class="b_count">123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em class="c_count">35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em class="d_count">123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>
</body>

</html>